  <template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    chartData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null
    };
  },
  // 使用计算属性处理 legend 的 data
  computed: {
    source() {
      // 检查 chartData 是否存在且 source 是否为数组
      if (this.chartData && Array.isArray(this.chartData.source)) {
        return this.chartData.source;
      }
      return [];
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(newData) {
        this.$nextTick(() => {
          this.initChart();
        });
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      try {
        this.chart = echarts.init(this.$el,'macarons');
        const chartOptions = this.generateChartOptions();
        this.chart.setOption(chartOptions);
      } catch (error) {
        console.error('初始化图表时出错:', error);
      }
    },
    generateChartOptions() {
      return {
        legend: {},
        tooltip: {},
        dataset: {
          source:this.source,
          // source: [
          //   ['product', '总营收（元）', '总成本（元）', '总利润（元）'],
          //   ['2024年4月','115000','38000','77000'],
          //   ['2024年5月', '119100', '40000', '79100'],
          //   ['2024年6月', '125000', '39500', '85500'],
          //   ['2024年7月', '139100', '42500', '96600'],
          //   ['2024年8月', '145000', '43000', '102000'],
          //   ['2024年9月', '130900', '41000', '89900'],
          //   ['2024年10月', '125000', '40500', '84500'],
          //   ['2024年11月', '115000', '38500', '76500'],
          //   ['2024年12月', '135000', '42000', '93000'],
          //   ['2025年1月', '130900', '41500', '89400'],
          //   ['2025年2月', '119100', '39000', '80100'],
          //   ['2025年3月', '139100', '43500', '95600']
          //   // ['Matcha Latte', 43.3, 85.8, 93.7],
          //   // ['Milk Tea', 83.1, 73.4, 55.1],
          //   // ['Cheese Cocoa', 86.4, 65.2, 82.5],
          //   // ['Walnut Brownie', 72.4, 53.9, 39.1]
          // ]
        },
        xAxis: { type: 'category' 
          // ,
          // axisLabel: {
          //     interval: 0 // 强制显示所有标签
          // }
        },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
      }
    }
  }
}
</script>
